<template>
    <div class="file-list">
        <el-card shadow="hover">
            <div slot="header" class="flex jusc">
                <div class="head-title">
                    <span>文件列表</span>
                    <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length
                    }}个</span>
                </div>
                <div class="flex">
                    <div class="head-input">
                        <el-input v-model="searchContent" prefix-icon="el-icon-search" @keyup.enter.native="getFileList"
                            placeholder="搜索文件名或用户账号"></el-input>
                    </div>
                    <div class="head-btn">
                        <el-button type="danger" @click="del(-1)" size="medium">批量删除</el-button>
                        <el-button type="success" @click="back()" size="medium">批量恢复</el-button>
                    </div>
                </div>
            </div>
            <div>
                <el-table ref="multipleTable" :data="fileList" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange" v-loading="isLoading">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="filename" label="文件名">
                    </el-table-column>
                    <el-table-column prop="fileSize" label="文件大小" width="90">
                        <template slot-scope="scope">
                            {{ $global.getSize(scope.row.fileSize) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件类型" width="80">
                        <template slot-scope="scope">
                            <span v-show="scope.row.folderType == 1">文件</span>
                            <span v-show="scope.row.folderType == 2">文件夹</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="文件分类" width="100">
                        <template slot-scope="scope">
                            <span v-show="scope.row.fileType == 1">视频</span>
                            <span v-show="scope.row.fileType == 2">音频</span>
                            <span v-show="scope.row.fileType == 3">图片</span>
                            <span v-show="scope.row.fileType == 4">pdf</span>
                            <span v-show="scope.row.fileType == 5">doc</span>
                            <span v-show="scope.row.fileType == 6">excel</span>
                            <span v-show="scope.row.fileType == 7">txt</span>
                            <span v-show="scope.row.fileType == 8">code</span>
                            <span v-show="scope.row.fileType == 9">zip</span>
                            <span v-show="scope.row.fileType == 10">ppt</span>
                            <span v-show="scope.row.fileType == 11">其他</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="公共状态" width="80">
                        <template slot-scope="scope">
                            <span v-show="scope.row.publicType == 1">私有</span>
                            <span v-show="scope.row.publicType == 2">公共</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评论状态" width="80">
                        <template slot-scope="scope">
                            <span v-show="scope.row.commentType == 1">开启</span>
                            <span v-show="scope.row.commentType == 2">关闭</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="文件状态" width="90">
                        <template slot-scope="scope">
                            <span v-show="scope.row.status == 1">正常</span>
                            <span v-show="scope.row.status == 2">回收站</span>
                            <span v-show="scope.row.status == 3">彻底删除</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="上传时间" width="150">
                    </el-table-column>
                    <el-table-column prop="username" label="上传者" width="130">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="del(scope.row.id)"
                                v-show="scope.row.status != 2 && scope.row.status != 3">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pag">
                <el-pagination background layout="prev, pager, next" @current-change="changePage" :current-page="currPage"
                    :page-size="pageSize" :total="totalPage">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="编辑文件" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="editFileItem" label-width="80px">
                <el-form-item label="文件名称">
                    <el-input v-model="editFileItem.filename"></el-input>
                </el-form-item>
                <el-form-item label="文件类型">
                    <el-select v-model="editFileItem.folderType" placeholder="请选择活动区域">
                        <el-option label="文件" :value="1"></el-option>
                        <el-option label="文件夹" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件分类">
                    <el-select v-model="editFileItem.fileType" placeholder="请选择活动区域">
                        <el-option label="视频" :value="1"></el-option>
                        <el-option label="音频" :value="2"></el-option>
                        <el-option label="图片" :value="3"></el-option>
                        <el-option label="pdf" :value="4"></el-option>
                        <el-option label="doc" :value="5"></el-option>
                        <el-option label="excel" :value="6"></el-option>
                        <el-option label="txt" :value="7"></el-option>
                        <el-option label="code" :value="8"></el-option>
                        <el-option label="zip" :value="9"></el-option>
                        <el-option label="ppt" :value="10"></el-option>
                        <el-option label="其他" :value="11"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公共状态">
                    <el-select v-model="editFileItem.publicType" placeholder="请选择活动区域">
                        <el-option label="私有" :value="1"></el-option>
                        <el-option label="公共" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评论状态">
                    <el-select v-model="editFileItem.commentType" placeholder="请选择活动区域">
                        <el-option label="开启" :value="1"></el-option>
                        <el-option label="关闭" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件状态">
                    <el-select v-model="editFileItem.status" placeholder="请选择活动区域">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="回收站" :value="2"></el-option>
                        <el-option label="删除" :value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'file',
    data() {
        return {
            multipleSelection: [],
            searchContent: null,
            pageSize: 10,
            currPage: 1,
            totalPage: 1,
            isLoading: false,
            editDialogVisible: false,
            editFileItem: {},
        }
    },
    mounted() {
        this.getFileList()
    },
    methods: {
        async getFileList() {
            this.isLoading = true
            let res = await this.$store.dispatch("getFileList", {
                limit: this.pageSize,
                page: this.currPage,
                key: this.searchContent,
            })
            this.isLoading = false
            if (res.success) {
                this.currPage = res.data.currPage
                this.totalPage = res.data.totalCount
            }
            else this.$global.resError(res)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        changePage(page) {
            this.currPage = page
            this.getFileList()
        },
        edit(item) {
            this.editFileItem = item
            this.editDialogVisible = true
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editFileItem = {}
            }, 300)
        },
        async save() {
            let res = await this.$store.dispatch("updateFile", this.editFileItem)
            if (res.success) {
                this.$message.success(res.message)
                this.getFileList()
            }
            else this.$global.resError(res)
        },
        del(id) {
            // 多选删除
            if (id == -1) {
                this.multipleSelection = this.multipleSelection.map(item => item.id)
                this.submitUpdateStatus(this.multipleSelection, 3)
            }
            // 单选删除
            else {
                var list = []
                list.push(id)
                this.submitUpdateStatus(list, 3)
            }
        },
        back() {
            this.multipleSelection = this.multipleSelection.map(item => item.id)
            this.submitUpdateStatus(this.multipleSelection, 1)
        },
        async submitUpdateStatus(list, status) {
            if (list.length == 0) {
                this.$message.warning("请先选择")
                return
            }
            let res = await this.$store.dispatch("updateFileStatus", {
                list: list,
                status: status
            })
            if (res.success) {
                this.$message.success(res.message)
                this.getFileList()
            }
            else this.$global.resError(res)
        }
    },
    computed: {
        fileList() {
            return this.$store.state.file.fileList || []
        }
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    align-items: center;
}

.head-btn {
    margin: 0 10px;
}

.file-list {
    background: rgb(248, 248, 248);
}

.pag {
    text-align: center;
    margin-top: 20px;
}

.head-title {
    font-size: 17px;
    font-weight: 550;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.jusc {
    justify-content: space-between;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}
</style>